<template>
    <div class="price" :class="className" :style="{color : color, fontSize: size + 'px'}">
        {{prefix}}{{minusSign}}
        <span class="price-currency" :class="{ 'price-currency-small' : currencySize === 'small' }">{{currency}}</span>
        <span class="price-integer">{{priceInteger}}</span>
        <span :class="{
          'price-decimal-small' : decimal === 'small'
        }" v-if="priceDecimal">{{priceDecimal}}</span>
    </div>
</template>

<script>
  import * as _ from "lodash"

  export default {
    name: "Price",
    props: {
      className: String,
      prefix: String,
      value: [String, Number],
      size: [String, Number],
      currency: {
        type: String,
        default: "¥",
      },
      currencySize: [String, Number],
      color: String,
      decimal: {
        type: [String, Number],
        default: 2,
      },
    },
    computed: {
      priceNumber() {
        const { value } = this
        return _.isNumber(value) ? value : _.toNumber(value)
      },
      minusSign() {
        const { priceNumber } = this
        return priceNumber < 0 ? "-" : ""
      },
      priceInteger() {
        const { priceNumber } = this
        return Math.abs(parseInt(priceNumber))
      },
      priceDecimal() {
        const { decimal, value } = this
        const decimalStrings = []
        const prices = _.toString(value).split(".")

        if (_.isNumber(decimal) && decimal !== 0) {
          const decimalString = _.size(prices) === 2 ? prices[1].substr(0, decimal) : ""
          const zeros = _.join(_.range(0, decimal - _.size(decimalString), 0), "")
          decimalStrings.push(".", decimalString, zeros)
        } else {
          if (_.size(prices) === 2) {
            decimalStrings.push(".", prices[1])
          }
        }
        return _.join(decimalStrings, "")
      },
    },
  }
</script>

<style lang="scss">
    .price {
        display: inline-block;
        font-size: 18px;
        color: #ee0a24;

        .price-currency {
            margin-right: 2px;
        }

        .price-currency-small {
            font-size: 52%;
        }

        .price-decimal-small {
            display: inline;
            font-size: 62%;
        }
    }
</style>
